<template>
  <ContentWrap>
    <Search :schema="searchSchema" @search="setSearchParams" @reset="setSearchParams" />
    <div v-for="(item, index) in lastLogsRef" :key="`dynamics-${index}`">
      <div class="flex items-center">
        <div>
          <div class="text-14px">
            <span class="logDateTitle">{{ item.day }}</span>
            <span class="logDateTitle ml-10px">{{ formattedDayOfWeek(item.day) }}</span>
            <el-tag v-if="item.type == 1" type="primary" class="ml-20px" round>日报</el-tag>
            <el-tag v-if="item.type == 2" type="success" class="ml-20px" round>周报</el-tag>
            <el-tag v-if="item.type == 3" type="info" class="ml-20px" round>月报</el-tag>
            <el-button type="danger" class="ml-20px" size="small" @click="deleteLog(item)"
              >删除</el-button
            >
          </div>
          <div class="mt-15px">
            <div v-html="item.content"></div>
          </div>
        </div>
      </div>
      <ElDivider />
    </div>
    <div>
      <ElPagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        small
        background
        :page-sizes="[3, 5, 10, 50, 100, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { ElButton, ElDivider, ElMessage, ElMessageBox, ElPagination, ElTag } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { reactive, ref } from 'vue'
import { FormSchema } from '@/components/Form'
import { deleteById, getLogListApi } from '@/api/log'
import dayjs from 'dayjs'
const searchSchema = reactive<FormSchema[]>([
  {
    field: 'startDate',
    component: 'DatePicker',
    label: '开始日期',
    componentProps: {
      type: 'date'
    }
  },
  {
    field: 'endDate',
    component: 'DatePicker',
    label: '结束日期',
    componentProps: {
      type: 'date'
    }
  }
])
const pageSize = ref(5)
const currentPage = ref(1)
const totalCount = ref(0)
const searchParams = ref({})
const setSearchParams = (data: any) => {
  searchParams.value = data
  console.log(data)
  getLastLogs(data)
}
const lastLogsRef = ref<[]>([])

const formattedDayOfWeek = (date) => {
  return dayjs(date).format('dddd') // 使用 dayjs 格式化日期
}

// 获取项目数
const getLastLogs = async (data) => {
  const getListReq = {
    startDate: null,
    endDate: null,
    pageNo: currentPage.value,
    pageSize: pageSize.value
  }
  if (data?.startDate) {
    getListReq.startDate = dayjs(data.startDate).format('YYYY-MM-DD')
  } else {
    delete getListReq.startDate
  }
  if (data?.endDate) {
    getListReq.endDate = dayjs(data.endDate).format('YYYY-MM-DD')
  } else {
    delete getListReq.endDate
  }
  const res = await getLogListApi(getListReq)
  if (res) {
    lastLogsRef.value = res.data.items
    totalCount.value = res.data.itemTotal
  }
}
getLastLogs()
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  getLastLogs()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getLastLogs()
}
// 删除
const deleteLog = async (row) => {
  ElMessageBox.confirm('确认要删除当前数据吗?')
    .then(async () => {
      await deleteById({ id: row.id })
      ElMessage.success('删除成功')
      await getLastLogs(null)
    })
    .catch(() => {
      // catch error
      ElMessage.success('删除已取消')
    })
}
</script>

<style scoped lang="less">
.logDateTitle {
  font-size: 22px;
  font-weight: 700;
}
</style>
